<template>
  <div>
    <ul>
      <li v-for="goods in goodslist" :key="goods.cartid">
        {{ msg }}
        <van-swipe-cell class="cell">
          <input
            type="checkbox"
            class="fuxuan"
            :checked="goods.flag"
            @click="danchoice(goods.cartid, goods.flag)"
          />
          <van-card
            :price="goods.originprice"
            :title="goods.proname"
            :thumb="goods.img1"
            class="goods-card"
          >
            <template #num>
              <van-stepper
                theme="round"
                button-size="22"
                disable-input
                :value="goods.num"
                @plus="add(goods.cartid, goods.num)"
                @minus="jianshao(goods.cartid, goods.num)"
              />                                                                                          
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              @click="deletegoods(goods.cartid)"
            />
          </template>
        </van-swipe-cell>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import { Dialog } from "vant";

export default {
  name: "ShopingCart",
  data() {
    return {
      goodslist: [],
      show: false,
      value: true,
      msg: "",
    };
  },
  created() {
    axios
      .post("/api/cart/list", `userid=${localStorage.getItem("userid")}`)
      .then((res) => {
        if (res.data.code == 200) {
          this.goodslist = res.data.data;
        } else if (res.data.code == "10020") {
          this.msg = "您还未加入任何东西";
        }
      });

  },
  methods: {
    add(id, shuliang) {
      axios.post("/api/cart/updatenum", `cartid=${id}&num=${++shuliang}`);
    },
    jianshao(id, shuliang) {
      axios.post("/api/cart/updatenum", `cartid=${id}&num=${--shuliang}`);
    },
    danchoice(id, choice) {
      let key = !choice;
      axios.post("/api/cart/selectone", `cartid=${id}&flag=${key}`);
    },
    deletegoods(n) {
      Dialog.confirm({
        title: "确认删除吗?",
      })
        .then(() => {
          axios.post("/api/cart/remove", `cartid=${n}`).then((res) => {
            console.log(res);
          });
        })
        .catch(() => {});
    },
  },
  updated() {
    axios({
      method: "post",
      url: "/api/cart/list",
      data: `userid=${localStorage.getItem("userid")}`,
    }).then((req) => {
    if (req.data.code == 200) {
        // this.goodslist = req.data.data;
        let sum = 0;
        req.data.data.forEach((item) => {
          if (item.flag == true) {
            sum += item.num * item.originprice * 100;
          }
          this.name = sum;
        });
      } 

    });
  },
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
  width: 90%;
  float: right;
}

.fuxuan {
  float: left;
  margin-top: 1rem;
  margin-left: 1rem;
}
li {
  background-color: #fff;
  border: 1px solid #efefef;
}

.van-button {
  height: 8.6667rem;
}
</style>